• Demos
    • JavaScript Charts
    • JavaScript StockCharts
  • Download/NPM
    • Download CanvasJS
    • Install via NPM
  • Integrations
    Front End Technology Samples
    • React Charts
    • Angular Charts
    • Vue.js Charts New!
    • jQuery Charts
    • Dashboards
    Server Side Technology Samples
    • PHP Charts
    • Python Charts New!
    • ASP.NET MVC Charts
    • Spring MVC Charts
    • JSP Charts
  • License
  • Blog
  • Docs
    • Chart Documentation
    • StockChart Documentation
  • Support Forum
    • Chart Support
    • StockChart Support
  • My Account
My Account
  1. Home
  2. docs
  3. charts
  4. integration
  5. jQuery
  6. chart types
  • JavaScript Chart Samples
  • React Chart Samples
  • Angular Chart Samples
  • Vue.js Chart Samples
  • jQuery Chart Samples
  • PHP Chart Samples
  • Python Django Chart Samples
  • ASP.NET Chart Code Samples
  • JSP Chart Samples
  • Spring MVC Chart Samples
  • Dashboard Samples
  • JavaScript StockChart Samples
  • charts
    • introduction
      • installation
      • features
      • performance
      • requirements
      • support
    • getting started
      • Chart Elements
      • Updating Chart Options / Data
      • Title
      • Working With Data
      • Multi Series Charts
      • Combination Charts
      • Stacked Charts
      • Axis Element
      • Labels & Index Labels
      • Tick Marks, Grid Lines and Interlaced Colors
      • Legend
      • Markers
      • Date & Time Axis
      • ToolTip
      • Zooming & Panning
      • Event Handling
      • Formatting Numbers
      • Formatting Date & Time
      • HTML5 Color Coding
      • Empty / Null Data Points in Chart
    • chart types
      • Column Chart
      • Line Chart
      • Step Line Chart
      • Step Area Charts
      • Spline Chart
      • Area Chart
      • Spline Area Chart
      • Bar Chart
      • Pie Chart
      • Doughnut Chart
      • Bubble Chart
      • Funnel Chart
      • Pyramid Chart
      • Scatter Chart
      • Stacked Column
      • Stacked Column 100
      • Stacked Area
      • Waterfall chart
      • Stacked Area 100
      • Stacked Bar
      • Stacked Bar 100
      • Range Column Chart
      • Range Bar Chart
      • Range Area Chart
      • Range Spline Area Chart
      • OHLC Chart
      • Candlestick Chart
      • Error Chart
      • Box and Whisker Chart
    • chart options (reference)
      • interactivityEnabled
      • animationDuration
      • animationEnabled
      • exportFileName
      • exportEnabled
      • zoomEnabled
      • zoomType
      • theme
      • backgroundColor
      • colorSet
      • culture
      • rangeChanging
      • rangeChanged
      • width
      • height
      • dataPointMaxWidth
      • dataPointMinWidth
      • dataPointWidth
      • subtitles
      • toolbar
        • itemBackgroundColor
        • itemBackgroundColorOnHover
        • buttonBorderColor
        • buttonBorderThickness
        • fontColor
        • fontColorOnHover
      • title
        • text
        • wrap
        • textAlign
        • maxWidth
        • dockInsidePlotArea
        • verticalAlign
        • horizontalAlign
        • fontSize
        • fontFamily
        • fontWeight
        • fontColor
        • fontStyle
        • borderThickness
        • cornerRadius
        • borderColor
        • backgroundColor
        • margin
        • padding
      • axisX
        • title
        • titleWrap
        • titleMaxWidth
        • titleTextAlign
        • titleBackgroundColor
        • titleBorderColor
        • titleBorderThickness
        • titlePadding
        • titleFontColor
        • titleFontSize
        • titleFontFamily
        • titleFontWeight
        • titleFontStyle
        • margin
        • labelBackgroundColor
        • labelBorderColor
        • labelMaxWidth
        • labelBorderThickness
        • labelWrap
        • labelAutoFit
        • labelPadding
        • labelAngle
        • labelFontFamily
        • labelFontColor
        • labelFontSize
        • labelFontWeight
        • labelFormatter
        • labelFontStyle
        • prefix
        • labelTextAlign
        • suffix
        • valueFormatString
        • minimum
        • maximum
        • viewportMaximum
        • viewportMinimum
        • interval
        • intervalType
        • reversed
        • logarithmic
        • logarithmBase
        • tickLength
        • tickColor
        • tickThickness
        • lineColor
        • lineThickness
        • lineDashType
        • gridDashType
        • interlacedColor
        • gridThickness
        • tickPlacement
        • labelPlacement
        • gridColor
        • stripLines
          • value
          • showOnTop
          • lineDashType
          • opacity
          • labelFormatter
          • startValue
          • endValue
          • thickness
          • color
          • label
          • labelPlacement
          • labelAlign
          • labelBackgroundColor
          • labelWrap
          • labelBorderColor
          • labelMaxWidth
          • labelBorderThickness
          • labelTextAlign
          • labelPadding
          • labelFontFamily
          • labelFontColor
          • labelFontSize
          • labelFontWeight
          • labelFontStyle
        • crosshair
          • enabled
          • snapToDataPoint
          • color
          • opacity
          • thickness
          • lineDashType
          • valueFormatString
          • label
          • labelWrap
          • labelMaxWidth
          • labelTextAlign
          • labelBackgroundColor
          • labelFontFamily
          • labelBorderColor
          • labelFontColor
          • labelBorderThickness
          • labelPadding
          • labelFontSize
          • labelFontWeight
          • labelFontStyle
          • labelFormatter
          • updated
          • hidden
        • scaleBreaks
          • autoCalculate
          • maxNumberOfAutoBreaks
          • collapsibleThreshold
          • spacing
          • type
          • fillOpacity
          • color
          • lineColor
          • lineThickness
          • lineDashType
          • customBreaks
            • startValue
            • endValue
            • spacing
            • type
            • fillOpacity
            • color
            • lineColor
            • lineThickness
            • lineDashType
      • axisY
        • title
        • titleMaxWidth
        • titleWrap
        • titleTextAlign
        • titleFontColor
        • titleFontSize
        • titleFontFamily
        • titleFontWeight
        • titleFontStyle
        • margin
        • titleBackgroundColor
        • titleBorderColor
        • labelBackgroundColor
        • titleBorderThickness
        • titlePadding
        • labelFormatter
        • labelMaxWidth
        • labelWrap
        • labelAutoFit
        • labelBorderColor
        • labelBorderThickness
        • labelAngle
        • labelPadding
        • labelFontFamily
        • labelFontColor
        • labelFontSize
        • labelFontWeight
        • labelFontStyle
        • prefix
        • labelTextAlign
        • suffix
        • valueFormatString
        • minimum
        • maximum
        • interval
        • reversed
        • logarithmic
        • logarithmBase
        • viewportMinimum
        • viewportMaximum
        • tickLength
        • tickColor
        • tickThickness
        • lineColor
        • lineThickness
        • lineDashType
        • gridDashType
        • interlacedColor
        • gridThickness
        • gridColor
        • includeZero
        • tickPlacement
        • labelPlacement
        • stripLines
          • value
          • startValue
          • endValue
          • showOnTop
          • opacity
          • labelFormatter
          • lineDashType
          • thickness
          • color
          • label
          • labelPlacement
          • labelAlign
          • labelBackgroundColor
          • labelWrap
          • labelBorderColor
          • labelMaxWidth
          • labelBorderThickness
          • labelPadding
          • labelTextAlign
          • labelFontFamily
          • labelFontColor
          • labelFontSize
          • labelFontWeight
          • labelFontStyle
        • crosshair
          • enabled
          • snapToDataPoint
          • color
          • opacity
          • thickness
          • lineDashType
          • valueFormatString
          • label
          • labelWrap
          • labelTextAlign
          • labelMaxWidth
          • labelBackgroundColor
          • labelBorderColor
          • labelFontFamily
          • labelBorderThickness
          • labelFontColor
          • labelFontSize
          • labelPadding
          • labelFontWeight
          • labelFontStyle
          • labelFormatter
          • updated
          • hidden
        • scaleBreaks
          • autoCalculate
          • collapsibleThreshold
          • maxNumberOfAutoBreaks
          • spacing
          • type
          • fillOpacity
          • color
          • lineColor
          • lineThickness
          • lineDashType
          • customBreaks
            • startValue
            • endValue
            • spacing
            • type
            • fillOpacity
            • color
            • lineColor
            • lineThickness
            • lineDashType
      • axisX2
      • axisY2
      • data
        • name
        • cursor
        • visible
        • type
        • axisXType
        • axisYType
        • axisXIndex
        • axisYIndex
        • xValueType
        • yValueFormatString
        • zValueFormatString
        • percentFormatString
        • xValueFormatString
        • highlightEnabled
        • connectNullData
        • lineDashType
        • nullDataLineDashType
        • indexLabelLineDashType
        • indexLabelFormatter
        • color
        • lineColor
        • bevelEnabled
        • fillOpacity
        • startAngle
        • radius
        • innerRadius
        • indexLabel
        • indexLabelPlacement
        • indexLabelMaxWidth
        • indexLabelWrap
        • indexLabelTextAlign
        • indexLabelOrientation
        • indexLabelBackgroundColor
        • neckWidth
        • indexLabelFontStyle
        • neckHeight
        • indexLabelBorderColor
        • indexLabelBorderThickness
        • reversed
        • valueRepresents
        • indexLabelPadding
        • upperBoxColor
        • lowerBoxColor
        • indexLabelFontColor
        • whiskerLength
        • whiskerColor
        • whiskerThickness
        • indexLabelFontSize
        • whiskerDashType
        • indexLabelFontFamily
        • stemColor
        • indexLabelFontWeight
        • stemThickness
        • indexLabelLineColor
        • indexLabelLineThickness
        • stemDashType
        • linkedDataSeriesIndex
        • toolTipContent
        • lineThickness
        • markerType
        • markerColor
        • markerSize
        • markerBorderColor
        • markerBorderThickness
        • showInLegend
        • legendText
        • legendMarkerBorderColor
        • legendMarkerBorderThickness
        • legendMarkerType
        • explodeOnClick
        • click
        • legendMarkerColor
        • mouseover
        • mousemove
        • mouseout
        • risingColor
        • dataPoints
          • x
          • y
          • z
          • name
          • isIntermediateSum
          • isCumulativeSum
          • cursor
          • label
          • highlightEnabled
          • indexLabelLineDashType
          • indexLabelFormatter
          • indexLabel
          • indexLabelPlacement
          • indexLabelOrientation
          • indexLabelBackgroundColor
          • indexLabelBorderColor
          • indexLabelFontColor
          • indexLabelBorderThickness
          • indexLabelWrap
          • indexLabelPadding
          • indexLabelMaxWidth
          • indexLabelTextAlign
          • indexLabelFontSize
          • indexLabelFontStyle
          • indexLabelFontFamily
          • indexLabelFontWeight
          • indexLabelLineColor
          • indexLabelLineThickness
          • toolTipContent
          • exploded
          • color
          • lineColor
          • lineDashType
          • showInLegend
          • legendText
          • legendMarkerType
          • legendMarkerColor
          • legendMarkerBorderColor
          • legendMarkerBorderThickness
          • markerType
          • markerColor
          • markerSize
          • markerBorderColor
          • markerBorderThickness
          • click
          • mouseover
          • mousemove
          • mouseout
        • fallingColor
      • toolTip
        • enabled
        • fontColor
        • fontStyle
        • fontSize
        • fontFamily
        • fontWeight
        • borderThickness
        • cornerRadius
        • reversed
        • contentFormatter
        • backgroundColor
        • shared
        • content
        • animationEnabled
        • borderColor
        • updated
        • hidden
      • legend
        • cursor
        • reversed
        • maxWidth
        • maxHeight
        • itemWrap
        • itemMaxWidth
        • itemWidth
        • itemTextAlign
        • itemTextFormatter
        • markerMargin
        • dockInsidePlotArea
        • fontSize
        • fontFamily
        • fontColor
        • fontWeight
        • fontStyle
        • verticalAlign
        • horizontalAlign
        • itemmouseover
        • itemmousemove
        • itemmouseout
        • itemclick
    • methods & properties
      • CanvasJS
        • formatNumber()
        • formatDate()
      • Chart
        • get()
        • set()
        • addTo()
        • render()
        • exportChart()
        • print()
        • destroy()
      • Title
        • get()
        • set()
        • remove()
      • Subtitle
        • get()
        • set()
        • remove()
      • Legend
        • get()
        • set()
      • ToolTip
        • get()
        • set()
        • showAtX()
        • hide()
      • Axis
        • get()
        • set()
        • addTo()
        • remove()
        • convertValueToPixel()
        • convertPixelToValue()
      • StripLine
        • get()
        • set()
        • remove()
      • DataSeries
        • get()
        • set()
        • addTo()
        • remove()
      • Crosshair
        • showAt()
        • hide()
        • get()
        • set()
      • Toolbar
        • get()
        • set()
    • how to samples
      • Creating Dynamic Charts
      • Multiple Y Axis
      • Hide Unhide Data Series on Legend Click
      • Sync Zooming and Panning across Charts
      • Render Chart from User Input
      • Render Multiple Charts in a Page
      • JavaScript Charts from JSON API using AJAX
      • Creating Charts from XML
      • Creating Charts from CSV
      • Live Updating Charts from JSON API & AJAX
      • Position Image Over Chart
      • Make dataPoints on Chart Draggable
    • integration
      • jQuery
        • chart types
          • Column Chart
          • Line Chart
          • Step Line Chart
          • Spline Chart
          • Step Area Chart
          • Area Chart
          • Spline Area Chart
          • Bar Chart
          • Pie Chart
          • Doughnut Chart
          • Bubble Chart
          • Scatter Chart
          • Stacked Column Chart
          • Stacked Column 100 Chart
          • Stacked Area Chart
          • Stacked Area 100 Chart
          • Stacked Bar Chart
          • Stacked Bar 100 Chart
          • Range Column Chart
          • Range Bar Chart
          • Range Area Chart
          • Range Spline Area Chart
          • OHLC Chart
          • Candlestick Chart
      • ASP.NET MVC
        • chart types
          • Column Chart
          • Line Chart
          • Area Chart
          • Pie Chart
          • Doughnut Chart
          • Step Line Chart
          • Spline Chart
          • Bar Chart
          • Step Area Chart
          • Spline Area Chart
          • Scatter Chart
          • Bubble Chart
          • Stacked Column Chart
          • Stacked Column 100 Chart
          • Stacked Bar Chart
          • Stacked Bar 100 Chart
          • Stacked Area Chart
          • Stacked Area 100 Chart
        • how to samples
          • Create Dynamic Charts
          • Updating Live Chart from external JSON
          • Sync Zooming and Panning across Multiple Charts
          • Creating Charts from External JSON Data API
          • Creating Charts from CSV
          • Creating Charts from XML
          • Render Data from Database
      • React
      • Angular
      • Vue
  • stockcharts
    • introduction
      • installation
      • features
      • requirements
      • Support
    • getting started
      • StockChart Elements
      • Updating StockChart Options / Data
      • Title
      • Charts
      • Tooltip
      • Crosshair
      • RangeSelector
      • Navigator
      • Asynchronous Loading of Datapoints
    • stockchart options
      • animationEnabled
      • animationDuration
      • exportEnabled
      • exportFileName
      • colorSet
      • theme
      • backgroundColor
      • culture
      • width
      • height
      • rangeChanging
      • rangeChanged
      • title
      • subtitles
      • toolbar
      • charts
      • navigator
        • enabled
        • width
        • height
        • verticalAlign
        • animationEnabled
        • animationDuration
        • theme
        • backgroundColor
        • colorSet
        • dynamicUpdate
        • slider
          • maskColor
          • maskOpacity
          • maskInverted
          • handleColor
          • handleBorderColor
          • handleBorderThickness
          • handleWidth
          • handleHeight
          • minimum
          • maximum
          • outlineColor
          • outlineThickness
          • outlineInverted
        • axisX
        • axisY
        • data
      • rangeSelector
        • enabled
        • width
        • height
        • verticalAlign
        • label
        • selectedRangeButtonIndex
        • buttons
          • label
          • range
          • rangeType
        • buttonStyle
          • backgroundColor
          • backgroundColorOnHover
          • backgroundColorOnSelect
          • borderColor
          • borderThickness
          • labelFontColor
          • labelFontColorOnHover
          • labelFontSize
          • labelFontStyle
          • labelFontFamily
          • labelFontWeight
          • width
          • labelTextAlign
          • maxWidth
          • padding
          • spacing
          • cursor
        • inputFields
          • enabled
          • startValue
          • endValue
          • valueType
          • valueFormatString
          • style
            • backgroundColor
            • borderColor
            • borderColorOnFocus
            • borderThickness
            • fontColor
            • fontSize
            • fontStyle
            • fontFamily
            • fontWeight
            • width
            • maxWidth
            • padding
            • textAlign
            • cursor
    • methods & properties
      • CanvasJS
      • StockChart
        • get()
        • set()
        • addTo()
        • render()
        • exportChart()
        • print()
        • destroy()
      • Title
      • Subtitle
      • Charts
      • Navigator
        • get()
        • set()
        • addTo()
      • Slider
        • get()
        • set()
      • RangeSelector
        • get()
        • set()
      • Buttons
        • get()
        • set()
      • InputFields
        • get()
        • set()
      • ButtonStyle
        • get()
        • set()
      • Style
        • get()
        • set()
      • Toolbar
    • integration
      • jQuery
      • ASP.NET MVC
      • React
      • Angular
      • Vue

Supported jQuery Chart Types

This section contains an example of each type of chart supported by CanvasJS using jQuery plugin.

Types
    • Area Chart
    • Bar Chart
    • Bubble Chart
    • Column Chart
    • Doughnut Chart
    • Line Chart
    • Pie Chart
    • Spline Chart
    • Spline Area Chart
    • Scatter (Point) Chart
    • Stacked Area Chart
    • Stacked Area 100% Chart
    • Stacked Bar Chart
    • Stacked Bar 100% Chart
    • Stacked Column Chart
    • Stacked Column 100% Chart
    • Step Line Chart
    • Step Area Chart
    • Range Bar Chart
    • Range Column Chart
    • Range Area Chart
    • Range Spline Area Chart
    • Candlestick Chart
    • OHLC (Stock) Chart

If you have any questions, please feel free to ask in our forums.Ask Question

Quick Links

  • Chart Docs
  • StockChart Docs
  • About Us
  • FAQs

Server Side Technologies

  • ASP.NET MVC Charts
  • PHP Charts
  • JSP Charts
  • Spring MVC Charts

Front Side Technologies

  • JavaScript Charts
  • jQuery Charts
  • React Charts
  • Angular Charts
  • JavaScript StockCharts

Contact

  • Fenopix, Inc.
  • 2093 Philadelphia Pike,
  • #5678, Claymont,
  • Delaware 19703
  • United States Of America

©2025 Fenopix Privacy Policy Cookies Policy Careers